<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <u-textarea height="140" border="none" v-model="formData.content"
                    placeholder="详细描述你的需求，禁止发布重复信息，违法违规，广告营销类内容"></u-textarea>

      </view>
      <view class="form-item">
        <u-upload
            :fileList="fileList"
            name="1"
            multiple
            :maxCount="6"
            @afterRead="afterRead"
            @delete="deletePic"
        ></u-upload>
      </view>
      <view class="form-item">
        <up-cell-group>
          <u-cell @click="showPostType" isLink icon="setting-fill" title="帖子标签">
            <template #icon>
              <view class="iconfont_v2 icon-label icon"></view>
            </template>
            <template #value>
              <view style="color: #959191">{{ formData.type }}</view>
            </template>
          </u-cell>
        </up-cell-group>

      </view>
    </view>

    <view class="btn" @click="handleSubmit">
      <text style="margin-right: 10rpx;">✔</text>
      <text>发布</text>
    </view>

    <u-popup :round="10" :show="publishVisible" @close="postTypeClose">
      <view class="publish">
        <view class="title">选择发布的分类</view>
        <view class="type-list">
          <view @click="handlePublish(item)" class="type-item" v-for="(item,index) of postTypeList" :key="index">
            <view class="iconfont_v2 icon-shuqian icon"></view>
            <view>{{ item.name }}</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>

</template>

<script setup lang="ts">
import {reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import config from "@/config";
import {getToken} from "@/utils/auth";
import {POST_TYPE_LIST} from "@/constants";
import {addPostList} from "@/api/post";

const fileList = ref([])
const postTypeList = ref(POST_TYPE_LIST)
const publishVisible = ref(false)

const postTypeClose = () => {
  publishVisible.value = false
}

const showPostType = () => {
  publishVisible.value = true
}

const handlePublish = (item) => {
  console.log('fileList', fileList)
  formData.type = item.name
  publishVisible.value = false
}

const handleSubmit = () => {
  if (!formData.content) {
    uni.showToast({
      title: '请输入贴子内容'
    })
    return;
  }
  let imgList = fileList.value.map(item => item.url)
  if (!imgList || !imgList.length) {
    uni.showToast({
      title: '请上传图片'
    })
    return;
  }
  formData.imgs = imgList.join(',')
  addPostList(formData)
      .then(res => {
        console.log('res', res)
        uni.reLaunch({
          url: '/pages/home'
        })
      })
      .catch(err => {

      })
}

// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    uploadFilePromise(lists[i].url)
        .then(result => {
          console.log('then ', result)
          let item = fileList.value[fileListLen];
          fileList.value.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: result,
          });
          fileListLen++;
        })
        .catch(err => {
          fileList.value.splice(fileListLen, 1)
          uni.showToast({
            title: err
          })
        })
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: config.baseUrl + '/common/upload',
      filePath: url,
      name: 'file',
      header: {
        'Authorization': 'Bearer ' + getToken()
      },
      success: (res) => {
        let data = JSON.parse(res.data)
        if (data.code == 200) {
          resolve(data.fileName);
        } else {
          reject(data.msg)
        }
      },
    });
  });
}

const formData = reactive({
  type: '',
  content: '',
  img: ''
})

onLoad((options) => {
  console.log("options ", options)
  formData.type = options.postType
})
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
page {
  background-color: #fff;
}
.container {

}

.form {
  margin-top: 10rpx;

  .form-item {
    padding: 30rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    ::v-deep .u-textarea {
      padding: 0;
    }

    .icon {
      color: #959191;
    }

    ::v-deep .u-cell__title-text {
      color: #959191;
    }

  }
}

.btn {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #0063ff;
  text-align: center;
  color: #fff;
  border-radius: 18rpx;
  margin: 0 auto;
}

.publish {
  height: 500rpx;
  padding: 34rpx;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  .title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 30rpx;
  }

  .type-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;

    .type-item {
      flex: 330rpx 0 0;
      color: #666464;
      background-color: #efefef;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      padding: 24rpx 20rpx;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      display: flex;
      align-items: center;

      .icon {
        margin-right: 6rpx;
      }
    }
  }
}
</style>
